<template>
  <div>
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
        <div>
          <h2 style="text-align: center;">{{company}}一般客户工程设备材料采购汇总表</h2>
          <h4 style="text-align: center;">统计日期：{{current_time}}</h4>
        </div>
        <div style="margin: 10px 30px;">
          <table class="gridtable" v-if="data.type=='1'">
            <tr>
              <th>序号</th>
              <th>供应商名称</th>
              <th>材料编码</th>
              <th>设备材料名称</th>
              <th>规格型号</th>
              <th>累计采购金额</th>
            </tr>
            <tr v-for="(item, index) in data.rows" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.company}}</td>
              <td>{{item.code}}</td>
              <td>{{item.name}}</td>
              <td>{{item.stype}}</td>
              <td style="text-align: right;">{{item.summer}}</td>
            </tr>
            <tr>
              <td>#</td>
              <td>合计</td>
              <td></td>
              <td></td>
              <td></td>
              <td style="text-align: right;">{{sum.toFixed(2)}}</td>
            </tr>
          </table>
          <table class="gridtable" v-if="data.type=='2'">
            <tr>
              <th>序号</th>
              <th>项目部/事业部</th>
              <th>累计采购金额</th>
            </tr>
            <tr v-for="(item, index) in data.rows" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.organization_name}}</td>
              <td style="text-align: right;">{{item.summer}}</td>
            </tr>
            <tr>
              <td>#</td>
              <td>合计</td>
              <td style="text-align: right;">{{sum.toFixed(2)}}</td>
            </tr>
          </table>
          <table class="gridtable" v-if="data.type=='3'">
            <tr>
              <th>序号</th>
              <th>供应商名称</th>
              <th>累计采购金额</th>
              <th>金额上限</th>
            </tr>
            <tr v-for="(item, index) in data.rows" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.company}}</td>
              <td style="text-align: right;">{{item.summer}}</td>
              <td style="text-align: right;">{{parseFloat(item.upper_limit).toFixed(2)}}</td>
            </tr>
            <tr>
              <td>#</td>
              <td>合计</td>
              <td style="text-align: right;">{{sum.toFixed(2)}}</td>
              <td style="text-align: right;">{{upper_limit.toFixed(2)}}</td>
            </tr>
          </table>
        </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;margin-top: -26px;">关闭</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getStore } from '@/libs/storage';
import moment from 'moment';
export default {
  name: 'view-sum',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      visible: this.value,
      title: '',
      height: 540,
      company: '',
      sum: 0,
      upper_limit: 0,
      current_time: '',
    }
  },
  methods: {
    setCurrentValue(value) {
      this.visible = value;
    },
    init() {
      this.current_time = moment(new Date()).format('YYYY-MM-DD');
      switch(this.data.type) {
        case '1':
          this.title = '供货商分类汇总';
          break;
        case '2':
          this.title = '项目部分类汇总';
          break;
        case '3':
          this.title = '供货商总汇总';
          break;
      }
      this.sum = 0;
      this.upper_limit = 0;
      this.data.rows.forEach(item => {
        this.sum += parseFloat(item.summer);
        if (this.data.type=='3') {
          this.upper_limit += parseFloat(item.upper_limit);
        }
      });
      const userInfo = JSON.parse(getStore('userInfo'));
      this.company = userInfo.compamy;
    },
    handleCancel() {
      this.visible = false;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
      
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 120);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.gridtable {
  font-family: '微软雅黑';
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
  
}

.gridtable td {
  border-width: 1px;
  padding: 1px 8px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>
